<template>
  <div class="contain">
    <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
      <el-tab-pane label="2d" name="first"><ros2d v-if="show2d" /></el-tab-pane>
      <el-tab-pane label="3d" name="second"
        ><ros3d v-if="!show2d"
      /></el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ros2d from "./ros2d.vue";
import ros3d from "./ros3d.vue";
export default {
  components: {
    ros2d,
    ros3d,
  },
  data() {
    return {
      activeName: "first",
      show2d: true,
      page: 0,
    };
  },
  methods: {
    handleClick(tab, event) {
      if (tab.index == 0 && this.page != 0) {
        this.page = 0;
        this.show2d = true;
      } else if (tab.index == 1 && this.page != 1) {
        this.page = 1;
        this.show2d = false;
      }
    },
  },
};
</script>
<style lang="less" scoped>
.contain {
  position: relative;
  // height: 100vh;
}
/deep/.el-tabs__header {
  position: absolute;
  top: 20px;
  left: 45%;
  height: 20px;
  .el-tabs__nav-scroll {
    background: #7a7878;
  }
}
.el-tab-pane{
  margin-top: 70px;
}
</style>
